<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
	</head>
	<style>
		.layui-colla-title2{
			position: relative;
			height: 42px;
			line-height: 42px;
			padding: 0 15px 0 35px;
			color: #333;
			background-color: #f2f2f2;
			cursor: pointer;
		}
	</style>
	<body>
		<div class="page-content-wrap">
			<div class="layui-tab" style="margin: 0;">
				<ul class="layui-tab-title">
					<li><a href="/data">数据列表</a></li>
					<li class="layui-this">数据详情</li>
				</ul>
				<div id="main-content layui-form">
					{% for i in range(0,sheetList | length) %}
					<div class="layui-tab-content col-lg-4">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>
								{{sheetList[i]}} 
							</legend>
						</fieldset>
						<div class="layui-collapse">
							<div class="layui-colla-item">
								<h2 class="layui-colla-title2"><span id="tx{{i}}">PM2.5的平均值</span><i class="layui-icon layui-colla-icon"></i>
								<select name="" idx="{{i}}" id="select-pz-{{i}}" class="select-pz">
									{% for k in dataList2[i] %}
									<option value="{{k}}">{{k}}</option>
									{% endfor %}
								</select>
								<select name="" idx="{{i}}" id="select-type-{{i}}" class="select-type">
									<option value="0">饼图</option>
									<option value="1">柱形图</option>
									<option value="2">折线图</option>
									<!-- <option value="3">散点图</option> -->
								</select>
								<a data-id="{{sheetList[i]}}" href="/details/{{title}}/{{sheetList[i]}} " class="layui-btn layui-btn-small layui-btn-normal go-btn" data-url="/details/{{title}}/{{sheetList[i]}} ">详情</a>
								</h2>
								<div class="layui-colla-content layui-show">
									<div style="height: 300px;width:500px" id="chart{{i}}"></div>
								</div>
							</div>
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
			<div class="layui-form-item" style="padding-left: 10px;">
				<div class="layui-input-block">
					<a href="/data" class="layui-btn layui-btn-primary">返回</a>
				</div>
			</div>
		</div>
		<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'dialog',  'element', 'upload', 'layedit'], function() {
				var layer = layui.layer,
					$ = layui.jquery;
				var element = layui.element();

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');

				// var title = getQueryVariable('id');
			});
			var dataList = '{{dataList}}';
			var sheetList = '{{sheetList2}}';
			dataList = dataList.replace(/&#34;/g,'"');
			dataList = JSON.parse(dataList);
			sheetList = sheetList.replace(/&#34;/g,'"');
			sheetList = JSON.parse(sheetList);
			console.log(dataList);
			var bt_chartList = [];
			for(var i in dataList){
				var chartDom = document.getElementById('chart'+i);
				var myChart = echarts.init(chartDom);
				var optionChart1;
				var data = dataList[i].PM25
				var tbdata = []
				for(var j in data){
					tbdata.push({
						"name":j,
						"value":data[j].toFixed(3)
					})
				}
				var optionChart1 = getOptionBT();
				optionChart1.title.text = sheetList[i];
				optionChart1.series[0].data = tbdata;

				optionChart1 && myChart.setOption(optionChart1);
				bt_chartList.push(myChart);
			}
			$('.select-pz').change(function(){
				var idx = $(this).attr('idx')
				var type = $('#select-type-'+idx).val();
				var value = $(this).val();
				var data = dataList[idx][value];
				setOption(type,idx,data,value)
			})

			$('.select-type').change(function(){
				var type = $(this).val();
				var idx = $(this).attr('idx');
				var value = $('#select-pz-'+idx).val();
				var data = dataList[idx][value]; //这是需要渲染的数据
				setOption(type,idx,data,value)
			})
			function setOption(type,idx,data,value)
			{
				switch(type){
					case "0":  //饼图
						// console.log(sheetList[idx]);
						var option = getOptionBT(sheetList[idx])
						option.title.text = sheetList[idx];
						var newData = [];
						for(var j in data){
							newData.push({
								"name":j,
								"value":data[j].toFixed(3)
							})
						}
						option.series[0].name = value+"的平均值"
						option.series[0].data = newData;
						console.log(option);
						// echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
						var chartDom = document.getElementById('chart'+idx);
						echarts.init(chartDom).dispose();
						var myChart = echarts.init(chartDom);
						option && myChart.setOption(option);
					break;
					case "1":  //柱形
						var option = getOptionZXT(sheetList[idx])
						xData = [];
						yData = [];
						for(var i in data){
							xData.push(i);
							yData.push(data[i].toFixed(3));
						}
						// option.xAxis.data = xData;
						option.xAxis = {
							type: 'category',
							data: xData
						};
						option.series[0].data = yData;
						var chartDom = document.getElementById('chart'+idx);
						echarts.init(chartDom).dispose();
						var myChart = echarts.init(chartDom);
						option && myChart.setOption(option);
					break;
					case "2":
						var option = getOptionZX(sheetList[idx])
						xData = [];
						yData = [];
						for(var i in data){
							xData.push(i);
							yData.push(data[i].toFixed(3));
						}
						// option.xAxis.data = xData;
						option.xAxis = {
							type: 'category',
							data: xData
						};
						option.series[0].data = yData;
						var chartDom = document.getElementById('chart'+idx);
						echarts.init(chartDom).dispose();
						var myChart = echarts.init(chartDom);
						option && myChart.setOption(option);
					break;
					default:
						break;
				}
			}
			function getOptionBT(text)
			{
				var option = {};
				option = {  //饼图样式
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					xAxis:{
						show:false
					},
					yAxis:{
						show:false
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [
						{
							name: 'PM2.5平均值',
							type: 'pie',
							radius: '50%',
							data: [],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				return option;
			}
			function getOptionZXT(text)
			{
				var option = {};
				option = {
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					// 提示框
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								color: '#7171C6'
							}
						}
					},
					xAxis:{
						type: 'category',
						data: '',
						name:'月份'
					},
					yAxis: {
						type: 'value',
						name:'单位：mg/m³'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar'
					}]
				};
				return option;
			}
			function getOptionZX(text)
			{
				var option = {}
				option = {
					title: {
						text: text,
						subtext: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								color: '#7171C6'
							}
						}
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						name:'月份',  
					},
					yAxis: {
						type: 'value',
						name:'单位：mg/m³',
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line'
					}]
				};
				return option;
			}
		</script>
	</body>

</html>